import React from 'react'
import {List, DatePicker, InputItem, TextareaItem, WhiteSpace, Picker} from 'antd-mobile'
import { createForm } from 'rc-form'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../../reducers'
import {actions as SAction} from '../../../reducers/schedule'
import {actions as MAction} from '../../../reducers/milestone'

import {post} from '../../../axios'
import history from '../../../history'
import utils from '../../../common/utils'
import moment from 'moment'
import CustomImagePicker from '../../../components/image-picker'

class AddSchedule extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          hasError: false,
          files: [],
          project_id: 0
        }
    }

    componentDidMount() {
      let project_id = utils.getQueryString('project_id', location.search)
      this.setState({project_id})
      this.props.get_milestone(project_id)
    }

    formatPickerData(arrs, label='title', value='id') {
      let data = []
      arrs.map(x=>data.push({label: x[label], value: x[value]}))
      return data
    }

    submit = () => {
        this.props.form.validateFields((errors, value) => {
          let imgs = this.state.files.map(x => x.uri)
          value.resource = imgs
          console.log(errors,value)
          if (errors) {
            this.setState({hasError: true})
          } else {
            value.project_milestone_id = value.project_milestone_id?value.project_milestone_id.pop():0
            value.created_at = moment(value.created_at).format('YYYY-MM-DD')
            this.props.save_schedule(value, this.state.project_id)
          }
      });
    }
    render() {
        const { getFieldProps, getFieldError } = this.props.form,
          {files, hasError} = this.state,
          milestones = this.formatPickerData(this.props.milestone)

        return (
          <div className='form-div'>
              <WhiteSpace/>
              <List>  
                <DatePicker
                {...getFieldProps('created_at',
                  {rules: [{required: true, message: '请选择'}]}
                )}
                  mode="date"
                  extra="请选择"
                >
                  <List.Item arrow="horizontal">进度时间</List.Item>
                </DatePicker>
                {getFieldError('created_at')&&hasError?<div className='err-msg'>{getFieldError('created_at')}</div>: null }                            
              </List>
              <WhiteSpace/>

              <List>  
                <Picker 
                data={milestones}   
                cols={1} 
                {...getFieldProps('project_milestone_id',
                  {rules: []}
                )} 
                >
                    <List.Item arrow="horizontal">进度所在阶段</List.Item>
                </Picker>
                {getFieldError('project_milestone_id')&&hasError?<div className='err-msg'>{getFieldError('project_milestone_id')}</div>: null }              
              </List>
              <WhiteSpace/>

              <List> 
                <TextareaItem
                  {...getFieldProps('content',
                    {rules: [{required: true, message: '必须填写'}]}
                  )}
                  title="进度说明"
                  rows={5}
                  count={100}
                />
                {getFieldError('content')&&hasError?<div className='err-msg'>{getFieldError('content')}</div>: null }              
              </List>
              <WhiteSpace/>

              <List >    
                <CustomImagePicker 
                    files={files} 
                    callback={(files, type, index) => this.setState({files})}
                />
              </List>
              
              <div className="btns">
                <a className="contact" onClick={()=>this.submit()}>提交</a>
              </div>
          </div>
        )
    }
}

function mapStateToProps(state) {
  return {
    milestone: state.milestone.list,
  }
}

function mapDispatchToProps(dispatch) {
  return  {
    get_milestone: bindActionCreators(MAction.get_milestone, dispatch),
    save_schedule: bindActionCreators(SAction.save_schedule, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(createForm()(AddSchedule))